<script lang="ts" setup>

import {Link} from "@inertiajs/vue3";
</script>

<template>
    <div class="font-inter bg-neutral min-h-screen flex items-center justify-center p-4 bg-pattern">
        <!-- 主容器 -->
        <div class="w-full max-w-6xl flex flex-col lg:flex-row rounded-2xl overflow-hidden card-shadow bg-white">
            <!-- 左侧品牌区域 -->
            <div class="lg:w-1/2 bg-gradient-to-br from-[#165DFF] to-[#722ED1] p-8 lg:p-12 text-white relative overflow-hidden">
                <!-- 装饰元素 -->
                <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full -ml-24 -mb-24"></div>

                <div class="relative z-10 h-full flex flex-col justify-between">
                    <!-- 品牌Logo和名称 -->
                    <div class="slide-in">
                        <div class="flex items-center space-x-3 mb-2">
                            <h1 class="text-2xl font-bold">预约收银商户中心</h1>
                        </div>
                        <p class="text-white/80 text-sm line-clamp-3 leading-7"> 登录预约收银商户中心，体验智能化预约管理与高效收银系统，让您的生意经营更简单、更高效。</p>
                    </div>

                    <!-- 品牌介绍 -->
                    <div class="slide-in  mt-4">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold leading-tight mb-4">
                            高效管理 - 轻松收银
                        </h2>

                        <p class="text-white/80 text-sm line-clamp-3 leading-7">
                            登录预约收银商户中心，体验智能化预约管理与高效收银系统，让您的生意经营更简单、更高效。
                        </p>

                        <!-- 特性列表 -->
                        <div class="space-y-4 mt-4">
                            <div class="flex items-center space-x-3">
                                <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                </div>
                                <p class="text-white/90  mt-1">智能预约管理，减少人工失误</p>
                            </div>
                            <div class="flex items-center space-x-3">
                                <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                </div>
                                <p class="text-white/90  mt-1">多种支付方式，快速完成收银</p>
                            </div>
                            <div class="flex items-center space-x-3">
                                <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                                </div>
                                <p class="text-white/90 mt-1">实时数据报表，掌握经营状况</p>
                            </div>
                        </div>
                    </div>

                    <!-- 底部联系信息 -->
                    <div class="mt-4 pt-8 border-t border-white/20 slide-in">
                        <p class="text-white/70 text-sm">需要帮助？</p>
                        <div class="flex items-center space-x-4 mt-2">
                            <Link class="text-white/90 hover:text-white transition-colors" href="#">
                                <icon-phone  class="mr-1" />400-000-0000
                            </Link>
                            <Link class="text-white/90 hover:text-white transition-colors" href="#">
                                <icon-email class="mr-1"   />support@example.com
                            </Link>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:w-1/2 p-8 lg:p-12 flex flex-col gap-8 justify-between">
                <slot />
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>
